<template>
	<div class="exams_box animated fadeInUp">
		<div class="project_title">
			<li class="project_left">
				<p>医师模考
					<sub>/Medical Examination</sub>
				</p>

				<img class="icon1" src="@/assets/home/icon1.png" alt="">
				<img class="icon2" src="@/assets/home/icon2.png" alt="">
			</li>
			<div class="project_r" @click="openHistory">
				<img src="../../../assets/home/history.png" alt="">
				<p>历史成绩</p>
			</div>
		</div>
		<ul class="exams_list">
			<li v-for="(item,index) in dataList.ExamList" @click="start(item.id,item)">
				<div>
					<p>{{item.title}}</p>
					<nav>
						<!-- {{ item.count }} -->
						150
						<span>道题</span>
						已有
						<span>{{ item.peoplesum }}</span>
						人
					</nav>
				</div>
				<button>
					<img src="@/assets/home/pen-icon.png" alt="">
					开始考试
				</button>
			</li>
		</ul>
	</div>
	<div class="paging">
		<el-pagination :pager-count="5" background layout="prev, pager, next" :total="dataList.total"
			:current-page="dataList.page" @current-change="changesize" />
	</div>
	<div class="unit_box">
		<el-dialog v-model="dataList.unit" width="240px" center :show-close="false" top="40vh">
			<div class="dialog_content">
				<div class="dialog_content_item" v-for="(item,index) in dataList.unitList"
					@click="godetail(item.Jd,item.timeout,item.id,item.type_name)">
					{{item.type_name}}
				</div>
			</div>
			<template #header>
				<span class="diaolgTitle">{{dataList.unitTitle}}</span>
			</template>
		</el-dialog>
	</div>
	<div class="history_box">
		<el-dialog v-model="dataList.history" width="800px" center :show-close="false">
			<div class="history_box_content">
				<div class="history_box_content_item" v-for="(item,index) in dataList.historyList">
					<p class="p1">{{item.title}}</p>
					<div>
						<p class="p1">
							成绩：{{item.score}}分
						</p>
						<p class="p2">
							考试时间：{{item.create_time}}
						</p>
						<button @click="goHistoryList(item.id,item.title)">查看考题</button>
					</div>

				</div>
			</div>
			<template #header>
				<div class="diaolgTitle_box">
					<span class="diaolgTitle">历史成绩</span>
					<img @click="dataList.history = false" src="../../../assets/home/closeImg.png" alt="">
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import axios from "axios";
	import {
		useRouter
	} from 'vue-router'
	import {
		reactive,
		onMounted
	} from 'vue'
	const dataList = reactive({
		page: 1,
		total: 0,
		ExamList: [],
		unit: false,
		history: false,
		unitTitle: '',
		id: '',
		unitList: [],
		selectTitli: '',
		historyList: [],
		tiem: 0
	})
	const router = useRouter()
	onMounted(() => {
		ExamIndexF()
	})
	const start = (id, item) => {
		dataList.selectTitli = item.title
		dataList.time = item.timeout
		axios({
			url: '/Exam/danyuanlist',
			baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
			method: 'POST',
			data: {
				exam_cat_id: id
			}
		}).then(res => {
			dataList.unitList = res.data.list
			dataList.unitTitle = item.title
			dataList.id = id
			dataList.unit = true
		})
	}
	const godetail = (item, time, id, name) => {
		// console.log(id)
		// return
		var list = {
			list: [],
			time
		}
		item.forEach(val => {
			var items = {
				id: val.id,
				title: val.title,
			}
			list.list.push(items)
		})
		router.push({
			path: '/test',
			query: {
				time: dataList.time,
				list: JSON.stringify(list),
				title: dataList.selectTitli + ' - ' + name,
				id
			}
		})
	}
	const goHistoryList = (id,title) => {
		router.push({
			path: '/historyList',
			query: {
				title,
				id
			}
		})
	}
	const changesize = (value) => {
		dataList.page = value
	}
	const ExamIndexF = () => {
		axios({
			url: '/Exam/index',
			baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
			method: 'get',
			data: {
				page: dataList.page,
				limit: 8
			}
		}).then(res => {
			dataList.ExamList = res.data.list
			dataList.total = res.data.count
			console.log(res.data.count, "888888")
		})
	}
	const openHistory = () => {
		dataList.history = true
		axios({
			url: '/Exam/user_history',
			baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
			method: 'POST',
			data: {
				username: localStorage.getItem('username') ? localStorage.getItem('username') : ''
			}
		}).then(res => {
			dataList.historyList = res.data.data
			console.log(res.data.data)
		})
	}
</script>

<style lang="scss">
	.el-dialog {
		border-radius: 10px;
	}

	.unit_box {
		.el-dialog__header {
			margin-right: 0;
		}
	}
</style>
<style lang="scss" scoped>
	.diaolgTitle_box {
		position: relative;

		img {
			position: absolute;
			width: 35px;
			height: 35px;
			right: -20px;
		}
	}

	.diaolgTitle {
		font-size: 26px;
		font-weight: 600;
		color: #1CABD9;
	}

	.dialog_content {
		&_item {
			width: 180px;
			height: 51px;
			background: #1CABD9;
			border-radius: 10px 10px 10px 10px;
			font-size: 20px;
			font-weight: 600;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
			cursor: pointer;
		}
	}

	@media screen and (min-width:1200px) {
		.history_box {
			&_content {
				height: 600px;
				overflow-y: scroll;

				.p1 {
					font-size: 16px;
					font-weight: 600;
					color: #333333;
				}

				.p2 {
					font-size: 14px;
					font-weight: 400;
					color: #666666;
					padding-left: 50px;
				}

				&_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20px 0;

					div {
						display: flex;
						align-items: center;
					}

					button {
						padding: 4px 8px;
						background: #1CABD9;
						border-radius: 100px 100px 100px 100px;
						font-size: 14px;
						font-weight: 400;
						color: #FFFFFF;
						border: 0;
						margin-left: 10px;
					}
				}
			}
		}

		.paging {
			width: 100%;
			margin-bottom: 50px;
			display: flex;
			justify-content: center;

			:deep(.is-active) {
				background-color: #FF9933 !important;
			}
		}

		.exams_box {
			width: 1000px;
			margin: 0 auto;
			padding: 40px 0;
			min-height: 500px;

			.exams_list {
				padding: 40px 0;

				li {
					display: flex;
					justify-content: space-between;
					width: 1000px;
					height: 97px;
					padding: 20px;
					background: #FFFFFF;
					box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
					border-radius: 10px 10px 10px 10px;
					margin-bottom: 30px;
					transition: all 0.5s;

					div {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						p {
							font-size: 18px;
							font-weight: 600;
							color: #333333;
						}

						nav {
							font-size: 14px;
							font-weight: 400;
							color: #666666;

							span:first-child {
								margin-right: 30px;
							}
						}
					}

					button {
						width: 130px;
						height: 37px;
						background: #FF9933;
						border-radius: 37px;
						color: #FFFFFF;
						border: none;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;

						img {
							width: 21px;
							height: 21px;
							margin-right: 8px;
						}
					}

				}

				li:hover {
					-webkit-transform: translate(-10px, -10px);
					transform: translate(-10px, -10px);
				}
			}
		}

		.project_title {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;

			.project_left {
				height: 60px;
				border-radius: 8px 0 0 8px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				position: relative;
				background-color: #1CABD9;

				p {
					padding-left: 20px;
					position: relative;
					z-index: 5;
					font-size: 30px;
				}

				sub {
					position: relative;
					z-index: 5;
					font-size: 12px;
					bottom: 5px;
				}

				.icon1 {
					// width: 343px;
					position: absolute;
					height: 60px;
					right: -50px;
					bottom: 0;
				}

				.icon2 {
					width: 120px;
					position: absolute;
					height: 40px;
					bottom: -9px;
					right: -76px;
				}
			}

			.project_r {
				width: 130px;
				height: 37px;
				background: #1CABD9;
				border-radius: 37px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				img {
					width: 21px;
					height: 21px;
					margin-right: 5px;
				}

				p {
					font-size: 16px;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}
	}

	@media screen and (max-width: 1200px) {
		.paging {
			width: 95vw;
			margin-bottom: 6vw;
			display: flex;
			justify-content: center;

			:deep(.is-active) {
				background-color: #FF9933 !important;
			}
		}

		.exams_box {
			width: 95vw;
			margin: 0 auto;
			padding: 4vw 0;
			min-height: 61vh;

			.exams_list {
				padding: 4vw 0;

				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 95vw;
					padding: 3vw;
					background: #FFFFFF;
					box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
					border-radius: 1vw;
					margin-bottom: 4vw;

					div {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						p {
							font-size: 2.4vw;
							font-weight: 600;
							color: #333333;
							margin-bottom: 2vw;
						}

						nav {
							font-size: 1.8vw;
							font-weight: 400;
							color: #666666;

							span:first-child {
								margin-right: 3vw;
							}
						}
					}

					button {
						padding: 1vw 2vw;
						background: #FF9933;
						border-radius: 34vw;
						color: #FFFFFF;
						border: none;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;

						img {
							width: 2.5vw;
							height: 2.5vw;
							margin-right: 0.9vw;
						}
					}

				}
			}
		}

		.project_title {
			display: flex;
			width: 90vw;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5vw;

			.project_left {
				height: 8vw;
				border-radius: 0.9vw 0 0 0.9vw;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				position: relative;
				background-color: #1CABD9;

				p {
					padding-left: 3vw;
					position: relative;
					z-index: 5;
					font-size: 4vw;
				}

				sub {
					position: relative;
					z-index: 5;
					font-size: 1vw;
					bottom: 0.5vw;
				}

				.icon1 {
					// width: 38vw;
					position: absolute;
					height: 8vw;
					right: -6vw;
					bottom: 0;
				}

				.icon2 {
					width: 14vw;
					position: absolute;
					height: 5vw;
					bottom: -1vw;
					right: -8.5vw;
				}
			}

			.project_r {
				background: #1CABD9;
				border-radius: 6vw;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 1vw 2vw;

				img {
					width: 2.5vw;
					height: 2.5vw;
					margin-right: 5px;
				}

				p {
					font-size: 2vw;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}
	}
</style>